<template>
	<view :class="lang">
		<u-navbar :is-fixed="true" :title="$t('guides.交通标志大全')" back-icon-name="arrow-leftward">
			<view class="slot-wrap greenbg heigh150">
				<view class="u-navbar-centent-slot"><!-- <text>购卡中心</text> --></view>
			</view>
		</u-navbar>
		<view class="guides">
			<view class="guide" v-for="(item,index) in biaozhilist"  :key="index">
				<view class="guidetitle"  :class="lang+'layout'">
					<view class="guidetitleleft font-35">
						<text>{{item.fname}}</text>
					</view>
					<view class="guidetitleright textright font-30 greytext" @click="morelist(index)">
						<text>{{item.sane}} {{ $t('guides.张') }}</text>
						<u-icon class="pr-15" :name="lang !='cn'?'arrow-left':'arrow-right'"></u-icon>
					</view>
				</view>
				<view class="guidelist" @click="morelist(index)">
					<view class="guidelistview" v-for="(row,indexs) in item.biaozhilist" :key="indexs">
						<image v-if="row.img != undefined" :src="row.img"></image>
					</view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	//接口
	import {
		jiaotongbiaozhilist_api		//交通标志接口
	} from '@/api/index';
	import {
			getImageCache
		} from '../../common/saveimg.js';
	export default {
		data() {
			return {
				lang: this.$i18n.locale,
				biaozhilist:[]
			}
		},
		onLoad() {
			var that = this;
			try {
				const value = uni.getStorageSync('lang_key');
				//console.log("app onlaunch",value);
				if (value) {
					that.$i18n.locale = value;
					that.lang = value;
				}else{
					uni.reLaunch({
						url: 'pages/setting/setting'
					});
				}
			} catch (e) {
				// error
				uni.reLaunch({
					url: 'pages/setting/setting'
				});
			}
			that.inits();
		},
		methods: {
			inits(){
				var that = this;
					console.log("jinru biaoz list")
					that.https({
						url: jiaotongbiaozhilist_api,
						method: 'POST',
						header: {
							'content-type': 'application/json'
						},
						data: {},
						success: res => {
							console.log("res---",res);
							var biaozhijson = res.biaozhi_list;
							var biaozhifenlei = [];
							for (var i = 0; i<biaozhijson.length; i++){
								console.log()
								
									var biaozhileijson = [];
									if(biaozhijson[i].jiaoTongBiaoZhiList.length != 0){
										if(biaozhijson[i].jiaoTongBiaoZhiList.length>4){
											for(var j=0; j<4;j++){
												biaozhileijson.push(biaozhijson[i].jiaoTongBiaoZhiList[j]);
											}
										}else{
											for(var j=0; j<biaozhijson[i].jiaoTongBiaoZhiList.length;j++){
												biaozhileijson.push(biaozhijson[i].jiaoTongBiaoZhiList[j]);
											}
										}
										
									}
									
									
									var fenlei = {'fid':biaozhijson[i].fid,'fname':biaozhijson[i].fname,'sort':biaozhijson[i].sort,'sane':biaozhijson[i].jiaoTongBiaoZhiList.length,biaozhilist:biaozhileijson};
									biaozhifenlei.push(fenlei);
								
								
							}
							console.log("biaozhilist",biaozhifenlei);
							that.biaozhilist = biaozhifenlei;
							
						},
						fail: err => {
							console.log(err);
						}
					});
			},
			morelist(ind){
				this.$u.route({
					url: '/pages/guidepost/guidepostlist?ind='+ind,
				})
			}
		}
	}
</script>

<style>
	.u-navbar-content-title{
		left:80rpx !important;
		width: 364rpx !important;
	}
.guides{
	width: 700rpx;
	display: block;
	margin: 0rpx auto;
}
.guide{
	width: 700rpx;
	display: block;
	border-bottom: 1rpx solid #F6F7F6;
	height: 220rpx;
	margin: 20rpx auto;
}
.guidelist{
	width: 700rpx;
	height: 150rpx;
	line-height: 60rpx;
	display: flex;
	flex-direction: row;
	align-items: center;
	text-align: center;
	justify-content: space-between;
}
.guidelistview{
	width: 25%;
	height: 150rpx;
}
.guidelistview image{
	width: 80rpx;
	height: 80rpx;
	margin: 30rpx auto;
}

.guidetitle{
	width: 700rpx;
	height: 60rpx;
	line-height: 60rpx;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
}
.guidetitleleft{
	width: 550rpx;
	height: 60rpx;
	display: inline-block;
}
.guidetitleright{
	width: 150rpx;
	height: 60rpx;
	display: inline-block;
}
.pr-15{
	padding-right: 15rpx;
}
.pl-15{
	padding-left: 15rpx;
}
</style>
